/*
 * @Description: 添加组织面板
 * @Author: Rfan
 * @Date: 2022-04-07 15:02:25
 * @LastEditTime: 2022-05-25 09:01:08
 */

import { Transfer } from 'antd';
import React, { useState } from 'react';
import type { SetStateAction } from 'react';

// ---------- MOCK DATA START ------------
const mockData: any[] = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`
  });
}

const initialTargetKeys = mockData.filter((item) => +item.key > 10).map((item) => item.key);
// ---------- MOCK DATA END ------------

const GroupPane = () => {
  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const onChange = (nextTargetKeys: SetStateAction<string[]>, direction: any, moveKeys: any) => {
    console.log('targetKeys:', nextTargetKeys);
    console.log('direction:', direction);
    console.log('moveKeys:', moveKeys);
    setTargetKeys(nextTargetKeys);
  };

  const onSelectChange = (sourceSelectedKeys: any, targetSelectedKeys: any) => {
    console.log('sourceSelectedKeys:', sourceSelectedKeys);
    console.log('targetSelectedKeys:', targetSelectedKeys);
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  const onScroll = (direction: any, e: { target: any }) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  };
  return (
    <div className="group-pane">
      <Transfer
        dataSource={mockData}
        titles={['Source', 'Target']}
        targetKeys={targetKeys}
        selectedKeys={selectedKeys}
        onChange={onChange}
        onSelectChange={onSelectChange}
        onScroll={onScroll}
        render={(item) => item.title}
      />
    </div>
  );
};

export default GroupPane;
